<template>
	<view class="one-store">
		<view class="search_box">
			<uni-easyinput class="search" type="text" placeholderStyle="font-size:28rpx;" @confirm="search"
				:inputBorder="false" @clear="clear" prefixIcon="search" @input="input" v-model="dataPages.workNo"
				placeholder="输入工单号搜索"></uni-easyinput>
			<view class="search_btn" @click="search">
				搜索
			</view>
		</view>
		<!-- 使用scroll-view实现tabs滑动切换 -->
		<scroll-view class="top-menu-view" scroll-x="true" :scroll-with-animation="true">
			<view class="menu_box">
				<view class="menu-topic-view" v-for="(item,index) in tabs" :key="index" @click="swichMenu(index)">
					<view :class="currentTab==index? 'menu-topic-act' : ''">
						<text class="menu-topic-text">{{item}}</text>
						<view class="menu-topic-bottom">
							<view class="menu-topic-bottom-color"></view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="list_top">
			<view class="filt_date">
				<YearsMonth @change="changeDate" :dataChange="dataPages.date"></YearsMonth>
				<view class="uniui-down1"></view><span
					style="color: #777;font-weight: 500;">(共{{oneLogList.total}}条)</span>
			</view>
		</view>
		<view class="scroll_content">
			<scroll-view class="scroll-view_list" :refresher-triggered="triggered" refresher-background="transparent"
				@refresherpulling="refresherpulling" refresher-enabled="true" scroll-y="true"
				@scrolltolower="scrolltolower" @refresherrefresh="onRefresh">
				<view v-if="oneLogList.rows.length==0" class="void_goods">
					<image class="img" src="/static/goods.svg" mode="aspectFit"></image>
					<view class="tip">暂无工单记录</view>
				</view>
				<checkbox-group class="order_list">
					<view class="order_list_item" v-for="(item,index) in oneLogList.rows" :key="index">
						<template v-if="currentTab===0">
							<view class="order_list_item_content" @click="gologDetail(item)">
								<view class="content_display">
									<view class="work_No">
										<span class="work_No_tip">工单单号：</span>
										<span style="font-weight: 700;">{{item.workNo}}</span>
										<image @click.native.stop="copyText(item.workNo)"
											style="width: 30rpx;height: 30rpx;margin-left: 12rpx;"
											src="/static/copy.svg" mode="aspectFit">
										</image>
									</view>
									<view class="work_No">
										<span class="work_No_tip">工单金额：</span>
										<span
											:style="{color: item.status==2?'#007cff':'#000000',fontSize:'30rpx',fontWeight:700}"><span
												style="font-size: 24rpx;">￥
											</span>{{(item.totalPrice||0).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')}}</span>
									</view>
								</view>
								<view class="status_tag"
									:style="{backgroundColor:colorBg[item.status-1],color:colorTag[item.status-1] }">
									{{item.status==2?'可提现':'冻结中'}}
								</view>
							</view>
							<view class="time_show">
								<image class="list-item_footer_img" src="@/static/network/order/time.svg"
									mode="aspectFit">
								</image>
								<view class="list-item_footer_time">
									{{item.status==2?'解冻':'冻结'}}时间：{{item.dateTime}}
								</view>
							</view>
						</template>
						<template v-else>
							<view class="order_list_item_content">
								<view class="content_display">
									<view class="work_No">
										<span class="work_No_tip">工单单号：</span>
										<span style="font-weight: 700;">{{item.workNo}}</span>
										<image @click.native.stop="copyText(item.workNo)"
											style="width: 30rpx;height: 30rpx;margin-left: 12rpx;"
											src="/static/copy.svg" mode="aspectFit">
										</image>
									</view>
									<view class="work_No">
										<span class="work_No_tip">报单时间：</span>
										<span>{{item.dateTime}}</span>
									</view>
								</view>
							</view>
						</template>
					</view>
				</checkbox-group>
			</scroll-view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		reactive,
		nextTick, onMounted
	} from "vue"
	import { onUnload, onLaunch, onLoad, onHide } from '@dcloudio/uni-app'
	import apiAccount from '@/util/network_api/account.js'
	import _ from "lodash";
	import YearsMonth from "@/components/u-network/YearsMonth.vue"
	const tabs = ref(['已完成', '未完成'])//标题列表
	const currentTab = ref(0)//当前标题index
	// Tab切换内容
	async function swichMenu(index) {
		if (currentTab.value == index) return
		dataPages.value.workNo = ''
		currentTab.value = index
		dataPages.value.status = index + 1
		oneLogList.value.rows = []
		dataPages.value.page = 1
		getOneStoreList()
	}
	const colorTag = ref(['#999', '#007cff'])
	const colorBg = ref(['#eee', '#f2f9ff'])
	const triggered = ref(false)
	// 搜索
	const oneLogList = ref({
		total: 0,
		rows: []
	})
	const clear = () => {
		dataPages.value.workNo = ''
		getOneStoreList()
	}
	const search = _.debounce(async () => {
		dataPages.value.workNo = dataPages.value.workNo.trim()
		dataPages.value.page = 1
		if (!dataPages.value.workNo) {
			dataPages.value.date = ''
		}
		getOneStoreList()
	}, 500,{leading:false})
	const input = (n) => {
		if (!n) {
			search()
		}
	}
	const dataPages = ref({
		"date": "",
		"limit": 0,
		"page": 0,
		"status": 1,//：1-已完成， 2-未完成,示例值(1)
		"workNo": "",
		freezeStatus: null//status==1生效
	})
	// 获取列表
	const getOneStoreList = async () => {
		uni.showLoading({
			title: '加载中',
		});
		apiAccount.getOrderRecord(dataPages.value).then(res => {
			uni.hideLoading()
			if (res.success) {
				if (oneLogList.value.rows.length < oneLogList.value.total && dataPages.value.page > 1) {
					oneLogList.value.rows = [...oneLogList.value.rows, ...res.data.rows]
					oneLogList.value.total = res.data.total
				} else {
					oneLogList.value = res.data
				}
			}
		})
	}
	onLoad(async (e) => {
		if (e.freezeStatus == 1) {
			dataPages.value.freezeStatus = 1
		}
		getOneStoreList()
	})
	onUnload(() => {
		uni.hideLoading()
	})
	// 下拉刷新
	const refresherpulling = (e) => {
		if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
		triggered.value = true
	}
	// 底部触发
	const scrolltolower = () => {
		if (oneLogList.value.rows.length < oneLogList.value.total) {
			dataPages.value.page += 1
			getOneStoreList()
		}
	}
	const onRefresh = async () => {
		dataPages.value.workNo = ''
		dataPages.value.page = 1
		await getOneStoreList()
		setTimeout(() => {
			triggered.value = false
		}, 800)
	}
	// 时间变化
	const changeDate = (val) => {
		dataPages.value.date = val
		getOneStoreList()
	}
	// 提现记录详情
	const gologDetail = (val) => {
		if (val.status == 1) return
		uni.navigateTo({
			url: '/pages_network/home/myAccount/orderLogDetail?workId=' + val.id
		})
	}
	const copyText = (data) => {
		uni.setClipboardData({
			data: data,
			success() {
				uni.showToast({
					title: '已复制',
					icon: 'success',
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	.one-store {
		background-color: #fafafa;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;

		.search_box {
			display: flex;
			align-items: center;
			// width: 100%;
			padding: 24rpx 24rpx 0;
			background-color: #fff;

			:deep(.uni-easyinput__content) {
				background-color: #f3f4f8 !important;
				border-radius: 50rpx;
			}

			.search {
				flex: 1;
				padding: 0 12rpx;
			}

			.search_btn {
				font-size: 28rpx;
				font-weight: bold;
				color: #007cff;
				margin-left: 12rpx;
			}
		}

		.top-menu-view {
			display: flex;
			width: 100%;
			align-items: center;
			justify-content: center;
			background-color: #FFFFFF;
			height: 86rpx;
			line-height: 86rpx;
			// border-top: 1rpx solid #d8dbe6;
			border-bottom: 1rpx solid #d8dbe6;

			.menu_box {
				display: flex;
				align-items: center;
				justify-content: space-around;
			}

			.menu-topic-view {
				display: inline-block;
				white-space: nowrap;
				height: 86rpx;
				position: relative;

				.menu-topic-text {
					font-size: 28rpx;
					color: #303133;
					padding: 0rpx 10rpx;
					margin: 0 30rpx;
					position: relative;
					z-index: 2;
					border-radius: 10rpx;
					font-weight: 700;

				}

				.menu-topic-bottom {
					position: absolute;
					bottom: 4rpx;
					left: 0;
					right: 0;
					margin: 0 40rpx;

					.menu-topic-bottom-color {
						width: 100%;
						height: 4rpx;
					}
				}

				.menu-topic-act {
					.menu-topic-text {
						font-weight: 700;
						color: #007cff;
					}

					.menu-topic-bottom {
						display: flex;
						justify-content: center;
					}

					.menu-topic-bottom-color {
						background: #007cff;
					}
				}
			}
		}

		.list_top {
			display: inline-block;
			margin: 24rpx 32rpx 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.filt_date {
				font-size: 24rpx;
				display: flex;
				align-items: center;
				font-weight: bold;

				.uniui-down1 {
					width: 0;
					height: 0;
					border-left: 10rpx solid transparent;
					border-right: 10rpx solid transparent;
					border-top: 12rpx solid #000;
					margin: 0 8rpx;
					margin-top: 4rpx;
				}
			}
		}

		.scroll_content {
			height: 100%;
			flex: 1;
			overflow: hidden;

			.scroll-view_list {

				::-webkit-scrollbar {
					display: none;
					width: 0 !important;
					height: 0 !important;
					-webkit-appearance: none;
					background: transparent;
					color: transparent;
				}

				height: 100%;
				box-sizing: border-box;

				.void_goods {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					width: 100%;
					height: 50vh;

					.img {
						width: 60%;
						height: 250rpx;
					}

					.tip {
						color: #aaa;
						font-size: 28rpx;
					}
				}

				.order_list {
					margin: 0 24rpx 24rpx;
					box-sizing: border-box;
					background-color: fafafa;
					padding-bottom: 300rpx;

					&_item {
						background-color: #FFFFFF;
						margin-bottom: 24rpx;
						padding: 24rpx;

						&_content {
							display: flex;
							justify-content: space-between;
							align-items: flex-start;

							.content_display {
								font-size: 28rpx;
								height: 100rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;

								.work_No {
									flex: 1;
									display: flex;
									align-items: center;

									.work_No_tip {
										color: #777;
									}

									.money_red {
										color: #f56c66;
									}
								}
							}

							.status_tag {
								font-size: 22rpx;
								border-radius: 4rpx;
								color: #FFFFFF;
								padding: 8rpx 12rpx;
							}
						}

						.time_show {
							display: flex;
							align-items: center;
							color: rgba(85, 85, 85, 1);
							padding: 8rpx 10rpx;
							margin-top: 12rpx;
							border-radius: 8rpx;
							background-color: rgba(246, 247, 248, 1);

							.list-item_footer_img {
								width: 30rpx;
								height: 30rpx;
							}

							.list-item_footer_time {
								margin: 0 12rpx;
								font-size: 26rpx;
							}
						}
					}

				}
			}
		}
	}
</style>